<template>
	<view class="goods-detail" v-if="goodsDetail.storeInfo.id">
		<view class="goods-detail-container">
			<Banner :list="goodsDetail.storeInfo.slider_image"></Banner>
			<BaseInfo :info="baseInfo"></BaseInfo>
			<SpecsSelect :info="specsInfo" ref="specsSelect"></SpecsSelect>
			<Description :info="description"></Description>
			<GoodsAction
				:info="goodsActionInfoData"
				@collect="onCollection"
				@cancel-collect="onCancelCollection"
				@cart="onGoCart"
				@add-cart="onAddCart">
			</GoodsAction>
		</view>
	</view>
</template>

<script>
	import authorizationMixin from '@/mixins/authorization'
	import {
		productDetail as productDetailApi,
		collectProduct as collectProductApi,
		cancelCollectProduct as cancelCollectProductApi
	} from '@/api/goods'
	import {
		addCart as addCartApi,
		getCartNum as getCartNumApi
	} from '@/api/cart'
	import Banner from './components/Banner'
	import BaseInfo from './components/BaseInfo'
	import SpecsSelect from './components/SpecsSelect'
	import Description from './components/Description'
	import GoodsAction from './components/GoodsAction'

	export default {
		mixins: [authorizationMixin],
		components: {
			Banner,
			BaseInfo,
			SpecsSelect,
			Description,
			GoodsAction
		},
		data() {
			return {
				id: 0,
				goodsDetail: {
					storeInfo: {}
				},
				cartNum: 0
			}
		},
		computed: {
			baseInfo () {
				return {
					price: this.goodsDetail.storeInfo.price,
					vip_price: this.goodsDetail.storeInfo.vip_price,
					store_name: this.goodsDetail.storeInfo.store_name,
					ot_price: this.goodsDetail.storeInfo.ot_price,
					stock: this.goodsDetail.storeInfo.stock,
					fsales: this.goodsDetail.storeInfo.fsales,
					unit_name: this.goodsDetail.storeInfo.unit_name
				}
			},
			specsInfo () {
				return {
					productValue: this.goodsDetail.productValue,
					productAttr: this.goodsDetail.productAttr,
					store_name: this.goodsDetail.storeInfo.store_name
				}
			},
			description () {
				return this.goodsDetail.storeInfo.description ? this.goodsDetail.storeInfo.description.replace(/<img/g, '<img style="width: 100%"') : ''
			},
			goodsActionInfoData () {
				return {
					id: this.id,
					userCollect: this.goodsDetail.storeInfo.userCollect,
					cartNum: this.cartNum
				}
			},
		},
		onLoad (options) {
			this.id = options.gid ? options.gid : 0
			this.getProductDetail()
			if (this.isLogined()) {
				this.getCartNum()
			}
		},
		methods: {
			onCollection () {
				const job = {
					name: '收藏商品',
					// 自定义函数
					funcs: [
					],
					// 页面方法
					methods: [
					],
					// data数据相关字段对应的数据值
					dataParams: {
					}
				}

				if (!this.isLogined()) {
					job.funcs.push({
						body: (pagePath) => {
							uni.navigateTo({
								url: pagePath
							})
						},
						args: [getCurrentPages().pop().$page.fullPath],
						delay: 0
					})
				}
				
				job.methods.push({
					name: this.collectProduct,
					delay: this.isLogined() ? 0 : 1000
				})
				
				this.needLoginCheckClickHandler(job)
			},
			onCancelCollection () {
				this.cancelCollectProduct()
			},
			onGoCart () {
				const job = {
					name: '去购物车列表',
					// 自定义函数
					funcs: [
					],
					// 页面方法
					methods: [
					],
					// data数据相关字段对应的数据值
					dataParams: {
					}
				}

				job.funcs.push({
					body: (pagePath) => {
						uni.switchTab({
							url: pagePath
						})
					},
					args: ['/pages/order_addcart/order_addcart'],
					delay: 0
				})
				
				this.needLoginCheckClickHandler(job)
			},
			onAddCart () {
				const job = {
					name: '加入购物车',
					// 自定义函数
					funcs: [
					],
					// 页面方法
					methods: [
					],
					// data数据相关字段对应的数据值
					dataParams: {
					}
				}
				if (!this.isLogined()) {
					job.funcs.push({
						body: (pagePath) => {
							uni.navigateTo({
								url: pagePath
							})
						},
						args: [getCurrentPages().pop().$page.fullPath],
						delay: 0
					})
				} else {
					job.methods.push({
						name: this.addCart,
						delay: 0
					})
				}
				
				this.needLoginCheckClickHandler(job)
			},
			async collectProduct () {
				const params = {
					id: this.id
				}
				const { status, msg } = await collectProductApi(params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.goodsDetail.storeInfo.userCollect = true
					uni.showToast({
						icon: 'none',
						title: '收藏成功',
						duration: 3000
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: msg,
						duration: 3000
					})
				}
			},
			async cancelCollectProduct () {
				const params = {
					id: this.id
				}
				const { status, msg } = await cancelCollectProductApi(params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.goodsDetail.storeInfo.userCollect = false
				  uni.showToast({
				    icon: 'none',
				    title: '取消收藏成功',
				    duration: 3000
				  })
				} else {
				  uni.showToast({
				    icon: 'none',
				    title: msg,
				    duration: 3000
				  })
				}
			},
			async addCart () {
				const specsSelectRef = this.$refs.specsSelect
				if (false === specsSelectRef.popupIsShow) {
					specsSelectRef.popupIsShow = true
					return false
				}
				const params = {
					cartNum: specsSelectRef.buyNum,
					new: 0,
					productId: this.id,
					uniqueId: specsSelectRef.curSelectedSpecValue.unique
				}
				const { status, msg } = await addCartApi(params)
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.getCartNum()
					uni.showToast({
						icon: 'none',
						title: '添加购物车成功',
						duration: 3000
					})
					setTimeout(() => {
						  specsSelectRef.popupIsShow = false
					}, 3000)
				} else {
				  uni.showToast({
				    icon: 'none',
				    title: msg,
				    duration: 3000
				  })
				}
			},
			async getCartNum () {
				const { status, data, msg } = await getCartNumApi()
				if (status === this.API_STATUS_CODE.SUCCESS) {
					this.cartNum = data.count
				} else {
				  uni.showToast({
				    icon: 'none',
				    title: msg,
				    duration: 3000
				  })
				}
			},
			async getProductDetail () {
				const { status, data, msg } = await productDetailApi(this.id)
				if (status === this.API_STATUS_CODE.SUCCESS) {
				  this.goodsDetail = data
				} else {
				  uni.showToast({
				    icon: 'none',
				    title: msg,
				    duration: 3000
				  })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
}
</style>
